<template>
  <div class="main">
    <div id="head" class="wrapper">
      <first-tab></first-tab>
      <second-tab></second-tab>
    </div>
    <div :style="{ paddingTop: fixedHeight }">
      <gray-block></gray-block>

      <ranking v-if="firstTabId === 2"></ranking>
      <cus-table-header v-if="firstTabId === 3"></cus-table-header>
      <gray-block v-if="firstTabId === 3"></gray-block>
      <div>
        <div v-for="index in tableHeader[firstTabId].length" :key="index">
          <cus-table :index="index" :table="firstTabId == 0 && index == 1" :line="firstTabId == 0 && index == 2"
            :tableHeight="tableHeight" v-if="show" :second-title="titleList[firstTabId][index - 1]"
            :tab-list="tabList[firstTabId]" :table-header="tableHeader[firstTabId][index - 1]" :flagIndex="index - 1"
            :table-data="tableDataList[index - 1]"></cus-table>
        </div>
      </div>
      <img v-if="showBackTop" class="backTop" src="~@/assets/feeManage/top.png" @click="backTop" alt="">
    </div>

  </div>
</template>

<script>

import FirstTab from './component/FirstTab'
import SecondTab from './component/SecondTab'
import CusTable from './component/cusTable/index'
import CusTableHeader from './component/cusTableHeader'
import Ranking from './component/Ranking'
import grayBlock from '@/components/grayBlock'
import { mapGetters } from 'vuex'
import { tableHeaderList } from './component/cusTable/tableHeaderConfig'
import { fd } from '../../utils/request'
import scroll from '@/mixins/scroll'
import { dateFormat, getChangeDate } from '../../utils/dateUtil'
import img1 from "@/assets/feeManage/1.png";
import img2 from "@/assets/feeManage/2.png";
import img3 from "@/assets/feeManage/3.png";
export default {
  name: 'index',
  components: {
    FirstTab,
    SecondTab,
    CusTable,
    CusTableHeader,
    grayBlock,
    Ranking
  },
  // 试用了一下mixin, 其实封装组件更好一点
  mixins: [scroll],
  data() {
    return {
      img1,
      img2,
      img3,
      fixedHeight: 0,
      qingfenzoushiDate: [],
      tableHeight: 90,
      tabList: [],
      tableHeader: [[], [], []],
      titleList: [],
      tableDataList: [],
      paramList: [],
      /*
        接口数据配置, 每一个数组为一个tab下表格的配置, 不包括过境流量表格配置(绿色表格)
       */
      paramparamList: [
        [
          ['/NewXLtraf/getTrafCondt', 'vhtype', 1],
          ['/NewXLtraf/getTrafline', 'vhtype', 1],
          ['/NewSubctraf/vhtype', 'vhtype', 1],
          ['/NewSubctraf/huo', 'vhtype', 1],
          ['/NewSubctraf/ke', 'vhtype', 1]
        ],
        [
          ['/NewXLtraf/vhtype', 'vhtype', 1],
          ['/NewXLtraf/huo', 'huo', 1],
          ['/NewXLtraf/ke', 'ke', 1]
        ],
        [
          ['/GetPRanktraf/vhtype', 'vhtype', 1],
          ['/GetPRanktraf/huo', 'huo', 1],
          ['/GetPRanktraf/ke', 'ke', 1]
        ],
        [
          ['/DataZbkh/ZbkhStationTypeTJ', 'ZbkhStationTypeTJ', 1],
          ['/DataZbkh/ZbkhStationHuoTJ', 'ZbkhStationHuoTJ', 1],
          ['/DataZbkh/ZbkhStationKeTJ', 'ZbkhStationKeTJ', 1]
        ],
        [
          ['/GetAreaNT/vhtype', 'vhtype', 1],
          ['/GetAreaNT/huo', 'huo', 1],
          ['/GetAreaNT/ke', 'ke', 1]
        ]
      ],
      show: true,
      sdhm: '',
      edhm: '',
    }
  },
  computed: {
    /*
      firstTabId：标识当前选择第几个tab(省界门架 高速线路 分公司 收费站)
      tabIndex 标识切换出入省(出入口) 值为 1 2 3(不包括收费站表格)
      tableIndex 标识当前tabIndex要切换的表格 与tabIndex同时切换， 共同组成一个条件 值为 1 2 3(不包括收费站表格)
      timeObj 时间筛选范围, 监听时间改变, 或事件选择改变
      selectRange 选择状态为收费站时, 监听选择范围改变
      ********* firstFlag 标识是切换最顶部tab, 此时不触发其他监听, 防止多次请求问题 *******
     */
    ...mapGetters(['timeActive', 'firstTabId', 'tabIndex', 'tableIndex', 'timeObj', 'selectRange', 'firstFlag'])
  },
  watch: {
    /*
      *********************************************
      以此方式实现功能会有重复多次调用请求的情况
      20220104  此问题已解决
      *********************************************
    */
    /*
      监听出入省(出入口) tabIndex变化时, 取出paramparamList中的接口数据赋值给 paramList (要重新赋值paramList 否则Promise.all不会重新获取)
     */
    'tabIndex': {
      handler() {
        // 判断如果标识是9, 则此时为点击最顶部切换, 不触发此监听
        if (this.firstFlag === 9) {
          return
        }
        this.updateData(true)
      }
    },
    /*
      切换tab变化(省界门架 高速线路 分公司 收费站), tab变化时, FirstTab组件内会重置tabIndex, 并触发tabIndex监听, 并且需要销毁所有表格组件,
      来重置表格组件内所有出入省的状态(如果不销毁组件, 需要新增配置, 配置组件内选中状态, 切换时重置状态)
     */
    'firstTabId': {
      handler(val) {
        this.show = false
        this.$nextTick(() => {
          this.show = true
        })
        this.paramList = []
        this.tableDataList = []
        this.updateData();
        this.getHeight(0);
      }
    },
    // 时间条件改变时, 会触发此监听
    timeObj: {
      handler(val) {
        // 判断如果标识是9, 则此时为点击最顶部切换, 不触发此监听
        if (this.firstFlag === 9) {
          return
        }
        // this.sdhm = val.startData;
        // this.edhm = val.endData;
        // 重置为9也是标识, 标识是9的时候不触发改变paramparamList的值
        this.$store.commit('SETTABINDEX', 9)
        this.$store.commit('SETTABLEINDEX', 9)
      },
      deep: true
    },
    // 选择状态在收费站时, 选择收费站下的区间, 会触发此监听, 改变tabIndex, 不为0, 触发监听
    selectRange: {
      handler() {
        // 重置为9也是标识, 标识是9的时候不触发改变paramparamList的值
        this.$store.commit('SETTABINDEX', 9)
        this.$store.commit('SETTABLEINDEX', 9)
      },
      deep: true
    }
  },
  async mounted() {
    this.$store.commit('SETTABINDEX', 1);
    this.$store.commit('SETTABLEINDEX', 1);
    this.sdhm = dateFormat(new Date(new Date().getTime() - 168 * 60 * 60 * 1000));
    this.edhm = dateFormat(new Date());
    // 取出配置中的所有数据
    const { tabList, tableHeader, titleList } = tableHeaderList
    this.tabList = tabList
    this.tableHeader = tableHeader
    this.titleList = titleList
    // 初始化表格数据
    this.updateData('init');
    this.getHeight(/android/i.test(navigator.userAgent) ? 0 : 20);
  },
  methods: {
    getHeight(height1) {
      this.$nextTick(() => {
        let height = document.getElementById('head').offsetHeight;
        this.fixedHeight = (height1 + height) + 'px';
        // this.fixedHeight = /android/i.test(navigator.userAgent) ? height + 'px' : (height + 30) + 'px'
      })
    },
    getYesterday() {
      let currentDate = new Date().getTime();
      let prevTime = currentDate - 60 * 60 * 24 * 1000;
      let prevDate = new Date(prevTime);
      return this.fommatDate(prevDate);
    },
    getPrevDate(time) {
      let currentDate1 = new Date(time).getTime();
      let dateArr = [];
      for (let i = 29; i > -1; i--) {
        let prevTime1 = currentDate1 - i * 60 * 60 * 24 * 1000;
        let prevDate1 = new Date(prevTime1);
        let month = new Date(prevDate1).getMonth() + 1;
        let date = new Date(prevDate1).getDate();
        month.toString().length == 2 ? month : (month = "0" + month);
        date.toString().length == 2 ? date : (date = "0" + date);
        // let prev = new Date(prevDate1).getFullYear() + "-" + month + "-" + date;
        let prev = month + "-" + date;
        dateArr.push(prev);
      }
      return dateArr;
    },
    fommatDate(prevDate) {
      let month = new Date(prevDate).getMonth() + 1;
      let date = new Date(prevDate).getDate();
      month.toString().length == 2 ? month : (month = "0" + month);
      date.toString().length == 2 ? date : (date = "0" + date);
      let theDate = new Date(prevDate).getFullYear() + "-" + month + "-" + date;
      return theDate;
    },
    updateData(fl = '') {
      // 0是标识, 重置状态之后的标识, 不重置状态会导致都点击出入口时, 不触发监听
      if (this.tabIndex === 0) {
        return
      }
      // 判断如果点击的是收费站, 收费站只有一个接口, 不走前三个逻辑 2022.5.30 接口改变，逻辑失效
      // if (this.firstTabId === 2) {
      //   this.paramList = [
      //     this.getData(...this.paramparamList[this.firstTabId][0])
      //   ]
      //   this.PromiseAllData()
      //   return
      // }
      // 判断如果是初始化数据并且传值是标识位9时, 不执行数据替换操作
      if (fl !== 'init' && this.tabIndex !== 9) {
        //全省趋势图 和 流量情况 共用一个 tab切换
        if (this.firstTabId == 0 && this.tableIndex == 0) {
          this.paramparamList[this.firstTabId][0][2] = this.tabIndex
          this.paramparamList[this.firstTabId][1][2] = this.tabIndex
        } else {
          this.paramparamList[this.firstTabId][this.tableIndex][2] = this.tabIndex
        }
      }
      /*
        从paramparamList中取出接口数据, 调用接口, 用Promise.all接收三个接口返回的数据数组, 方便渲染
       */
      this.paramList = []
      for (let i = 0; i < this.paramparamList[this.firstTabId].length; i++) {
        this.paramList.push(this.getData(...this.paramparamList[this.firstTabId][i]))
      }
      // this.firstTabId == 0 && this.initLiquid();
      // 调用Promise.all
      this.PromiseAllData()
    },
    async PromiseAllData() {
      this.$vux.loading.show({
        text: "加载中..."
      });
      const result = await Promise.all(this.paramList).finally(() => {
        this.$vux.loading.hide();
      })
      if (this.firstTabId == 0) {
        let data = result[0];
        let titleDataList = [
          {
            data: "",
            img: img1,
            name: "昨日流量",
            pern: "",
            yes: "",
            yesname: "同期流量"
          },
          {
            data: "",
            img: img2,
            name: "累计流量",
            pern: "",
            yes: "",
            yesname: "同期累计"
          }
        ];
        titleDataList[0].data = data[0].yesnum;
        titleDataList[1].data = data[0].yestraf;
        titleDataList[0].pern = data[0].tb1;
        titleDataList[1].pern = data[0].tb2;
        titleDataList[0].yes = data[0].qunum;
        titleDataList[1].yes = data[0].qutraf;
        result[0] = titleDataList;
      }
      this.tableDataList = result;

      this.$nextTick(() => {
        if (document.querySelector('.el-table__row td')) {
          let height = window.getComputedStyle(document.querySelector('.el-table__row td'), null).height;
          height = parseInt(height) * 9 + 64;
          this.tableHeight = height;
        }
      })
      // 重置状态, 不重置状态会导致都点击出口时, 不触发监听
      this.$store.commit('SETTABINDEX', 0)
      this.$store.commit('SETTABLEINDEX', 0)
      //  重置状态, 不重置状态会导致状态一直是9不触发其他监听, 不触发监听
      this.$store.commit('SETFIRSTFLAG', 0)
    },
    async getData(methodName, type, method) {
      this.sdhm = this.timeObj.startData;
      this.edhm = this.timeObj.endData;
      if (this.firstTabId === 0 && methodName == '/NewXLtraf/getTrafline') {
        switch (this.timeActive) {
          case '-1':
            this.sdhm = this.timeObj.startData;
            this.edhm = this.timeObj.endData;
            break;
          case 0:
            this.sdhm = dateFormat(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000));
            this.edhm = dateFormat(new Date(new Date().getTime() - 24 * 60 * 60 * 1000));
            break;
          default:
            let data = getChangeDate(this.timeActive);
            this.sdhm = this.timeActive ? data.startData : this.timeObj.startData;
            this.edhm = this.timeActive ? data.endData : this.timeObj.endData;
            break;
        }
        if (this.sdhm == this.edhm) {
          this.edhm = dateFormat(new Date(new Date(this.sdhm).getTime()));
          this.sdhm = dateFormat(new Date(new Date(this.sdhm).getTime() - 6 * 24 * 60 * 60 * 1000));
        }
      }
      let sdhm = this.sdhm.replace(/-/g, '');
      let edhm = this.edhm.replace(/-/g, '');

      if (methodName == '/NewXLtraf/getTrafCondt' && sdhm == edhm) sdhm = sdhm.substr(0, 4) + '0101';
      const params = {
        sdhm: sdhm,
        edhm: edhm,
        method,
        type: this.firstTabId === 0 && (this.timeActive == 3) ? 2 : 1,
        scnt: this.firstTabId === 2 ? this.selectRange.start : '',
        ecnt: this.firstTabId === 2 ? this.selectRange.end : '',
        subcno: this.firstTabId === 0 ? '0001' : '',
      }
      const { data } = await this.$PostRequest(methodName, fd(params))
      return data.data
    },
    // 设置切换不同的firstTabId, 所显示的表格位置
    getMarginTop() {
      if (this.firstTabId === 0) {
        return '0rem'
      } else if (this.firstTabId === 2) {
        return '-0.2rem'
      } else {
        return this.fixedHeight
      }
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  padding-top: constant(safe-area-inset-top);
  /* 兼容 iOS < 11.2 */
  padding-top: env(safe-area-inset-top);
  /* 兼容 iOS >= 11.2 */
}

/* 清分走势曲线图 */
.qingfenzoushi-box {
  padding-top: 0.42rem;

  .qingfenzoushi-title {
    font-size: 0.36rem;
    font-weight: bolder;
    color: #333333;
    padding: 0 0 0 0.3rem;
  }

  .theDateChoose {
    display: flex;
    align-items: center;
    margin: 0.38rem 0 0 0;
    padding-left: 0.3rem;

    .fastChoose {
      .qingfenzoushi-date-item {
        padding-right: 0.27rem;
      }

      // width: 2.8rem;
      display: flex;
      align-items: center;
      font-size: 0.28rem;
      color: #333333;

      .isActive {
        color: #4375c9;
      }
    }

    .timeChoose {
      display: flex;
      align-items: center;
      font-size: 0.26rem;
      color: #666666;
      padding: 0.18rem 0.12rem 0.16rem;
      background: #f7f7f7;
      border-radius: 0.12rem;
      border: 0.01rem solid #cbcbcb;
      text-align: center;

      .grayCrow {
        margin-left: 0.08rem;
        width: 0;
        height: 0;
        border-right: 0.1rem solid transparent;
        border-left: 0.1rem solid transparent;
        border-top: 0.1rem solid #cccccc;
      }
    }
  }
}

.wrapper {
  z-index: 999999999;
  position: fixed;
  width: 100%;
  background: #fff;
  top: 0;
  left: 0;
}

.backTop {
  position: fixed;
  width: 0.72rem;
  height: 0.72rem;
  right: 0.3rem;
  bottom: 0.3rem;
  z-index: 9;
}

.second-title {
  padding: 0 0 0 0.3rem;
  margin: 0.46rem 0;
  font-size: 0.36rem;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 700;
  color: #333333;
  line-height: 0.54rem;

  .self {
    font-size: 0.28rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 0.42rem;
  }
}

table {
  width: 100%;
  padding: 0 0.22rem 0.16rem;

  tr {
    display: flex;
    justify-content: center;
    align-items: center;

    .data-item {
      width: 2.3rem;
      height: 1.48rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      border-right: 1px solid #efefef;

      .data {
        font-size: 0.4rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #0CB4D8;
        /*line-height: 0.56rem;*/
        /*margin-bottom: 0.06rem;*/
        font-family: PingFangSC-Medium, PingFang SC;

        .small {
          font-size: 0.26rem;
          font-family: PingFangSC-Medium, PingFang SC;
        }

        .pern {
          font-family: PingFangSC-Medium, PingFang SC;
        }

        .font {
          font-size: 0.4rem;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #0CB4D8;
          /*line-height: 0.56rem;*/
          /*margin-bottom: 0.06rem;*/
          font-family: PingFangSC-Medium, PingFang SC;
        }
      }

      .item {
        /*display: flex;*/
        /*justify-content: center;*/

        img {
          width: 0.34rem;
          height: 0.34rem;
        }

        .item-title {
          font-size: 0.26rem;
          font-family: "PingFangSC-Medium, PingFang SC";
          // font-weight: 500;
          color: #999999;
          line-height: 0.36rem;
          text-align: center;
          font-weight: normal;
        }

        .item-second-title {
          font-size: 0.26rem;
          font-family: "PingFangSC-Medium, PingFang SC";
          font-weight: normal;
          color: #666;
          line-height: 0.4rem;
          display: flex;
          align-items: center;

          img {
            margin: 0 0.04rem;
            width: 0.16rem;
            height: 0.24rem;
          }

          span {
            font-family: PingFangSC-Medium, PingFang SC;
          }
        }
      }
    }

    .data-item:last-child {
      border-right: 0px;
    }
  }
}
</style>
